<template>
	<view class="container">

		<view class="topBox">
			<view class="topBanner">
				<uv-swiper :list="list" showTitle :title-style="{color:'red',textAlign: 'center'}" :autoplay="false"
					circular height="200" radius="12rpx"></uv-swiper>
			</view>
			<view class="title">{{info?.title}}</view>
			<view class="txtPrice">&yen;{{info?.price}}</view>
			<view class="txtNumber">已报名{{info?.real_sales+info?.sales}}人</view>
			<view class="schoolBox" v-for="(item,index) in info?.schools" :key="index"
			   @click="toMap(item)">
				<view>
					<view class="txtSchool">{{item.name}}</view>
					<view class="txtAdd01">
						{{item?.province?.name}}
						{{item?.city?.name}}
						{{item?.area?.name}}
					</view>
					<view class="txtAdd02">{{item?.address}}</view>
				</view>
				<view style="margin-top:45rpx;">
					<image src="@/static/img/icon06.png" style="width: 40rpx;height: 40rpx;"></image>
				</view>
			</view>
		</view>
		<view style="height:15rpx;background: #F6F6F6;width:100%;">

		</view>
		<view class="detailBox">
			<view class="deTtl"><text style="color:#707070">一 </text><text style="margin:0 20rpx;">详情</text><text
					style="color:#707070"> 一</text></view>
			<view class="deContent">
				<uv-parse :content="info?.content"></uv-parse>
			</view>
		</view>
		<uv-tabbar :border="false" :customStyle="{height:'150rpx',flexDirection: 'column'}">
			<view class="bottomBox">
				<view @click="popup.open()" class="fen">
					<image src="@/static/img/fen.png" style="width: 32rpx;height: 32rpx;"></image>
					<text>分享</text>
				</view>
				<view @click="collect()" class="fen">
					<image src="@/static/img/cang.png" style="width: 32rpx;height: 32rpx;"
						v-if="info?.is_collection=='0'"></image>
					<image src="@/static/img/icon11.png" style="width: 32rpx;height: 32rpx;"
						v-if="info?.is_collection=='1'"></image>
					<text>收藏</text>
				</view>
				<!-- <view class="bottom02" @click="collect()">
					<uv-icon name="star" size="45rpx" label="收藏" label-pos="bottom" label-size="12"
						v-if="info?.is_collection=='0'"></uv-icon>
					<uv-icon name="star-fill" size="45rpx" label="收藏" label-pos="bottom" label-size="12"
						v-if="info?.is_collection=='1'" color="#ffcc33"></uv-icon>
				</view> -->
				<uv-button :customStyle="{width:'480rpx',height:'90rpx',borderRadius:'12rpx'}" block color="#31C0ED"
					text="立即购买" @click="buy()" v-if="info?.is_buy=='1'"></uv-button>
				<uv-button :customStyle="{width:'480rpx',height:'90rpx',borderRadius:'12rpx'}" block color="#31c0ed"
					text="立即预约" @click="buy()" v-if="info?.is_buy=='0'"></uv-button>
			</view>
		</uv-tabbar>
		<!-- <uv-picker ref="picker" keyName="name" :columns="[info.attr]" @confirm="confirm" title="选择上课周期"></uv-picker> -->
		<uv-popup ref="picker" :round="10" mode="bottom" :closeable='true'  custom-style="height: 700rpx;">
			<view class="popBox" style="margin-top:1rpx;">
				<view style="display: flex;justify-content: center;margin-top:30rpx">
				  <view>请选择上课周期</view>
				</view>
				 <scroll-view class="scroll-area" scroll-y="true">
				<view class="nav-bar">
					<view v-for="(item, index) in lists" :key="index" class="nav-item" :class="{current:item.id==ids}"
						@click="opt_menu(item.id)">
						<view class="menu_name" style="display:felx;">
							<text class="tit">{{ item.name }}</text>
							<text class="name" >{{ item.remark }}</text>
						</view>
					</view>
				</view>
				    </scroll-view>
				<view style="display: flex;justify-content: center;margin-top:10px">
					<uv-button :customStyle="{width:'480rpx',height:'90rpx',borderRadius:'12rpx'}" block color="#31c0ed"
										text="确认" @click="confirm" ></uv-button>
				</view>

			</view>
		</uv-popup>
		<uv-popup ref="popup" :round="10" mode="bottom" :closeOnClickOverlay="true">
			<view class="pop_top">
				<image class="image" src='/static/img/logo.png'></image>
				<view class="pop_title">懒学青年</view>
				<view class="pop_text"> - 分享方式</view>
			</view>
			<view class="pop_box">
				<view class="pop_item" @click="popup.close()">
					<view class="pop_button">
						<uv-button open-type="share" :customStyle="{width:'100rpx',height:'100rpx',padding:0,border:0}">
							<image class="image" src='/static/img/fx01.png'></image>
						</uv-button>
					</view>
					<view class="pop_text">分享到微信</view>
				</view>
				<view class="pop_item" @click="popup.close();overlay_show = true">
					<view class="pop_button">
						<uv-button :customStyle="{width:'100rpx',height:'100rpx',padding:0,border:0}">
							<image class="image" src='/static/img/fx02.png'></image>
						</uv-button>
					</view>
					<view class="pop_text">分享朋友圈</view>
				</view>
				<view class="pop_item" @click="popup.close();popup_qrcode.open()">
					<view class="pop_button">
						<uv-button :customStyle="{width:'100rpx',height:'100rpx',padding:0,border:0}">
							<image class="image" src='/static/img/fx03.png'></image>
						</uv-button>
					</view>
					<view class="pop_text">分享二维码</view>
				</view>
				<view class="pop_item" @click="popup.close();route('pages/lesson/poster',{id:category_id})">
					<view class="pop_button">
						<uv-button :customStyle="{width:'100rpx',height:'100rpx',padding:0,border:0}">
							<image class="image" src='/static/img/fx04.png'></image>
						</uv-button>
					</view>
					<view class="pop_text">分享海报页</view>
				</view>
			</view>
			<view class="pop_bottom" @click="popup.close()">
				取消分享
			</view>
		</uv-popup>

		<uv-popup ref="popup_qrcode" bgColor='transparent' mode='center'>
			<view class="popup_qrcode">
				<view class="popup_close">
					<view class="pop_text">分享二维码</view>
					<uv-icon @click="popup_qrcode.close()" name="close" color="#B5C1CE" size="24"></uv-icon>
				</view>
				<view class="popup_img">
					<uv-image width="300rpx" height="300rpx" class="image" :src='qrcode'></uv-image>
				</view>
				<view class="pop_text">长按图片可转发给好友</view>
			</view>
		</uv-popup>


		<uv-overlay :show="overlay_show" @click="overlay_show = false">
			<view style="position: fixed;top:0;right:30rpx">
				<image class="sangedian" src='@/static/img/sangedian.png'></image>
			</view>
		</uv-overlay>
	</view>
</template>

<script lang="ts" setup>
	import route from '@/utils/route';
	import { ref, getCurrentInstance } from 'vue';
	import { http } from '@/common/http/index';
	import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { toast, imgUrl } from '@/utils/fun';
	import { userStorage } from '@/hooks/useStorage';
	const { getStorage } = userStorage();
	//定义变量
	const info = ref<any>({});
	const [picker, category_id, list, loading, overlay_show, popup, qrcode, popup_qrcode, lists, ids] =
		[ref(), ref(), ref(), ref(false), ref(false), ref(), ref(), ref(), ref(), ref()];
	onLoad(e => {
		if (e.scene) {
			category_id.value = e.scene;
		} else {
			category_id.value = e.id;
		}
		get_info();
	});
	const opt_menu = (id) => {
		ids.value = id;//切换 
	}
	//获取详情信息
	const get_info = async () => {
		info.value = (await http.get('/api/v1/product/details?id=' + category_id.value)).data;//获取左侧菜单
		lists.value = info.value.attr
		list.value = info.value.cover.map((item) => imgUrl(item.url))
		qrcode.value = imgUrl((await http.get(`/api/v1/qrcode?scene=${category_id.value}`)).data);//获取左侧菜单
		console.log(lists.value)
	};
	const collect = (e) => {
		let params = {
			product_id: category_id.value,
		}
		http.post(`/api/v1/product/collection`, params, { custom: { loading: true } })
			.then((res : any) => {
				if (info.value.is_collection == '1') {
					toast('取消成功！');
				} else {
					toast('收藏成功！');
				}
				get_info()
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	};
	const buy = (e) => {
		console.log('111111',lists.value)
		if (getStorage('token')) {
		if(lists.value.length>0){
			picker.value.open();
		}else{
			toast('请选择上课时间');
		}
		}else{
			toast('未登录!');
			// uni.re
				route('/pages/login/login');
		}
		
	}
	const confirm = (e) => {
		console.log(e)
		if(!ids.value){
			toast('请选择上课时间');
			return ;
		}
		picker.value.close();
		route('pages/lesson/lessonOrder', { product_id: category_id.value, attr_id: ids.value })
		// route('pages/lesson/lessonOrder', { product_id: category_id.value, attr_id: e.value[0].id })
	}

	const toMap = (item) => {
		console.log("11111111", item.place.split(',')[0], item.place.split(',')[1])
		uni.openLocation({
			name: item.name,
			latitude: Number(item.place.split(',')[1]), //要去的纬度
			longitude: Number(item.place.split(',')[0]), //要去的经度 
			address: item.address, //要去的具体地址 
		})
	}
	onShareAppMessage(e => {
		let pages = getCurrentPages(); //获取当前页面栈的信息
		let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
		console.log(currentPage)
		return {
			title: 'Hi!我向您推荐了' + info.value?.title,
			path: currentPage.route + `?scene=${category_id.value}`,  //后面是路径上要传递的参数+ `?scene=${this.mine.user_id}-${this.id}`
			imageUrl: info.value.cover.map((item) => imgUrl(item.url))[0]
		}

	})
	onShareTimeline(e => {
		return {
			title: 'Hi!我向您推荐了' + info.value?.title,
			query: `scene=${category_id.value}`, // "goodId=456&d=123"
			imageUrl: info.value.cover.map((item) => imgUrl(item.url))[0]
		}
	})
</script>

<style lang="scss" scoped>
	.scroll-area{
		height: 400rpx;
	}
	.nav-bar {
		padding: 10px 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		border-radius: 10px;
		.current {
			background: #fff !important;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 4rpx solid #31C0ED;
			.tit {
				font-weight: bold;
				font-size: 28rpx;
				color: #31C0ED !important;
			}
			.name {
				font-weight: 500;
				font-size: 22rpx;
				color: #31C0ED;
			}
		}

		.menu_name {
			text-algin: center;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			flex-direction: column;
			font-size: 26rpx;
			padding:10px;
			// .tit {
			// 	color: #333 ;
			// }
			// .name {
			// 	color: #999;
			// 	margin-top:8rpx;
			// }
		}

		.nav-item {
			background: #F7F8FA;
			margin-top: 20rpx;
			width: 48%;
			border-radius: 15rpx;
			// height: 80px;
			background: rgba(250, 250, 250, 1);

		}

	}

	.fen {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 16rpx;

		text {
			font-weight: 500;
			font-size: 16rpx;
			color: #666666;
			margin-top: 12rpx;
		}
	}

	.popup_qrcode {
		background: #fff;
		border-radius: 24rpx;
		width: 630rpx;
		padding: 30rpx 40rpx 60rpx 40rpx;

		.popup_close {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.pop_text {
				font-size: 30rpx;
				color: #999;
				text-align: left;
			}
		}

		.pop_text {
			font-size: 24rpx;
			color: #999;
			text-align: center;
		}

		.popup_img {
			display: flex;
			justify-content: center;
			margin: 50rpx 0;

			.image {
				width: 300rpx;
				height: 300rpx;
				display: block;
			}
		}
	}

	.pop_top {
		padding: 30rpx;
		display: flex;
		align-items: center;

		.pop_title {
			font-size: 26rpx;
			color: #333;
			margin-right: 10rpx;
		}

		.pop_text {
			font-size: 24rpx;
			color: #999;
		}

		.image {
			width: 30rpx;
			height: 30rpx;
			display: block;
			margin-right: 10rpx;
		}
	}

	.pop_box {
		background: #f8f8f8;
		width: 750rpx;
		display: flex;
		padding: 30rpx;

		.pop_item {
			margin-right: 30rpx;

			.pop_text {
				font-size: 24rpx;
				color: #999;
				text-align: center;
			}

			.pop_button {
				justify-content: center;
				margin-bottom: 30rpx;
				display: flex;

			}
		}

		// justify-content: space-between;
		.image {
			width: 50rpx;
			height: 50rpx;
			display: block;
		}
	}

	.pop_bottom {
		font-size: 26rpx;
		padding: 30rpx;
		color: #666;
		text-align: center;
	}

	.container {
		// padding: 30rpx;
		background: #fff;
	}

	.topBox {
		padding: 30rpx 34rpx;
		// border-bottom: 15rpx solid rgba(246, 246, 246, 1);
	}

	.topBanner {
		margin-bottom: 25rpx;
	}

	.title {
		margin-bottom: 10rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
	}

	.txtPrice {
		font-size: 28rpx;
		font-weight: bold;
		font-size: 26rpx;
		color: #31C0ED;
		line-height: 28rpx;
		/* font-weight: 700; */
		letter-spacing: 0px;
		padding: 8rpx 0 12rpx 0;
	}

	.txtNumber {
		font-size: 24rpx;
		/* font-weight: 500; */
		font-weight: 500;
		color: #999999;
		padding-bootom: 8rpx;
	}

	.schoolBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 2rpx solid #F2F2F2;
		padding: 10rpx 0;
		margin-top: 10rpx;
	}

	.txtSchool {
		font-size: 22rpx;
		line-height: 50rpx;
		color: rgba(0, 0, 0, 1);
	}

	.txtAdd01 {
		padding-right: 30rpx;
		font-size: 22rpx;
		line-height: 40rpx;
		color: rgba(102, 102, 102, 1);
	}

	.txtAdd02 {
		padding-right: 30rpx;
		font-size: 22rpx;
		line-height: 40rpx;
		color: rgba(153, 153, 153, 1);
	}

	.deTtl {
		margin: 10rpx 0 40rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		text-align: center;
	}

	.detailBox {
		padding: 30rpx;
		font-size: 26rpx;
		line-height: 36rpx;
		color: rgba(153, 153, 153, 1);
	}

	.detailBox image {
		margin: 15rpx 0;
	}

	.bottomBox {
		width: 100%;
		// height: 100%;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;

	}

	.blueBtn {
		width: 450rpx;
		border-radius: 6px;
		background: rgba(49, 192, 237, 1);
		color: rgba(255, 255, 255, 1);
		text-align: center;
		font-size: 30rpx;
	}

	::v-deep .blueBtn .uv-cell__title-text {
		color: #fff;
		font-size: 13px;
	}

	::v-deep .uv-tabbar__content__item-wrapper {
		display: block !important;
	}

	.sangedian {
		width: 472rpx;
		height: 719rpx;
		display: block;
	}
</style>